<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item >意见管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/index/advise/list' }">意见列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-row class="margintop20">
            <el-col>
                <el-table
                     :data="tableList.slice((page-1)*pageSize,pageSize*page)"
                     style="width: 100%"
                     class="tableinfo margintop20"
                     :header-cell-style="{'text-align':'center'}"
                     :cell-style="{'text-align':'center'}"
                     stripe
                >
                    <el-table-column label="#" type="index"></el-table-column>
                    <el-table-column label="意见人" prop="username"></el-table-column>
                    <el-table-column label="发布时间" prop="time" sortable>
                        <template slot-scope="scope">
                            {{scope.row.time | timeFormat('YY-MM-DD HH:mm')}}
                        </template>
                    </el-table-column>
                    <el-table-column label="意见标题" prop="title" >
                        <template slot-scope="scope">
                            {{scope.row.title}}
                        </template>
                    </el-table-column>
                    <el-table-column label="意见内容" :show-overflow-tooltip="true" prop="content" width="350" >
                        <template slot-scope="scope">
                            <el-popover placement="top-start" title="意见内容:" width="350" trigger="hover">
                                <div v-html="scope.row.content"></div>
                                <span slot="reference" v-html=" scope.row.content.substr(0,40)+(scope.row.content.length>40?'...':'')"> </span>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column label="意见分类" prop="category" >
                        <template slot-scope="scope">
                            <el-tag :type="colors[i]" v-for="(item,i) in scope.row.category.split(',')"  :key="i" size="mini">
                                {{item}}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150">
                        <template slot-scope="scope">
                            <el-button size="mini" type="info" @click="replayadviseone(scope.row)">回复</el-button>
                            <el-button @click="editAdvise(scope.row)" v-if="scope.row.mobile==mobile" size="mini" type="success" >编辑</el-button>
                            <el-popconfirm
                                v-if="scope.row.mobile==mobile"
                                confirmButtonText='好的'
                                cancelButtonText='不用了'
                                icon="el-icon-info"
                                iconColor="red"
                                title="你确定要删除吗？"
                                @onConfirm="delAdviseOne(scope.row)"
                                >
                                <el-button size="mini" slot="reference" type="danger">删除</el-button>
                                </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="flexbox">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        @current-change="changeCurrent"
                        :page-size="pageSize"
                        :current-page="page"
                        :total="total">
                        </el-pagination>
                    <span>共 {{total}} 条数据</span>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import  {getadviselist,delAdviseOne} from "@/api"
const colors = ["success","primary","danger","info","warning"]
export default {
    data(){
        return {
            tableList:[],
            page:1,
            pageSize:10,
            colors,
            mobile:localStorage.getItem("mobile")
        }
    },
    computed:{
        total(){
            return this.tableList.length;
        }
    },
    methods:{
        replayadviseone(row){
             this.$router.push({name:"advisereply",params:{id:row._id}})
        },
        editAdvise(row){
            this.$router.push({name:"adviseedit",params:{id:row._id}})
        },
        changeCurrent(page){
            this.page = page;
        },
        delAdviseOne(row){
            delAdviseOne({
                _id:row._id
            })
            .then(res=>{
                if(res.type){
                    this.tableList = this.tableList.filter(item=>item._id!==row._id)
                }
            })
        },
        getTableList(params){
            getadviselist(params)
            .then(res=>{
                if(res.type){
                    this.tableList  = res.result;
                }
            })
        }
    },
    mounted(){
        this.getTableList();
    }
}

// :show-overflow-tooltip="true"
</script>